<template>
  <div class='key-container'>
    <div class='key-title'>{{title}}</div>
    <div class='mian-center'>
      <!-- <div class='input-box'><span>{{ money || 0 }}</span></div> -->
      <div class='keyboard'>
        <div class='key-row'>
          <div class='key-cell' @click.stop="_handleKeyPress('7')">7</div>
          <div class='key-cell' @click.stop="_handleKeyPress('8')">8</div>
          <div class='key-cell' @click.stop="_handleKeyPress('9')">9</div>
          <div class='key-cell' @click.stop="_handleKeyPress('D')" style="background: #f5a623; color:#fff">C</div>
        </div>
        <div class='key-row'>
          <div class='key-cell' @click.stop="_handleKeyPress('4')">4</div>
          <div class='key-cell' @click.stop="_handleKeyPress('5')">5</div>
          <div class='key-cell' @click.stop="_handleKeyPress('6')">6</div>
          <div class='key-cell' @click.stop="_handleKeyPress('C')" style="background: #ff0000; color:#fff">清空</div>
        </div>
        <div class='key-row'>
          <div class='key-cell' @click.stop="_handleKeyPress('1')">1</div>
          <div class='key-cell' @click.stop="_handleKeyPress('2')">2</div>
          <div class='key-cell' @click.stop="_handleKeyPress('3')">3</div>
          <div class='key-cell' @click.stop="_handleKeyPress('-1')" style="background: #c8c8c8; color:#fff">设置</div>
        </div>
        <div class='key-row'>
          <div class='key-cell disabled' @click.stop="_handleKeyPress('0')">0</div>
          <div class='key-cell' @click.stop="_handleKeyPress('00')">00</div>
          <div class='key-cell' @click.stop="_handleKeyPress('.')">.</div>
          <div class='key-cell' @click.stop="_handleKeyPress('S')" style="background: #f65a2a; color:#fff">确认</div>
        </div>

      </div>
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        money: '',
        title: ''
      };
    },
    props: {
      ontool: {}
    },
    mounted() {
      if (this.ontool == '*') {
        this.title = "- 请输入数量 -"
      } else if (this.ontool == 'o') {
        this.title = "- 请输入折扣率[0-10] 10为不打折 -"
      } else if (this.ontool == 'g') {
        this.title = "- 请输入商品单价 -"
      }
    },
    methods: {
      //处理按键
      _handleKeyPress(e) {
        let num = e

        //不同按键处理逻辑
        // -1 代表无效按键，直接返回
        if (num == -1) {
          this.$emit('closeNum')
          return false;
        }
        switch (String(num)) {
          //小数点
          case '.':
            this._handleDecimalPoint();
            break;
            //删除键
          case 'D':
            this._handleDeleteKey();
            break;
            //清空键
          case 'C':
            this._handleClearKey();
            break;
            //确认键
          case 'S':
            this._handleConfirmKey();
            break;
          default:
            this._handleNumberKey(num);
            break;
        }
		//同步结果
		this.emitKeyResult(this.money);
      }, //处理小数点函数
      _handleDecimalPoint() {
        //如果包含小数点，直接返回
        if (this.money.indexOf('.') > -1) return false;
        //如果小数点是第一位，补0
        if (!this.money.length)
          this.money = '0.';
        //如果不是，添加一个小数点
        else
          this.money = this.money + '.';
      },
      //处理删除键
      _handleDeleteKey() {
        let S = this.money;
        //如果没有输入，直接返回
        if (!S.length || '?' == S) return false;
        //否则删除最后一个
        this.money = S.substring(0, S.length - 1);
      },
      //处理清空键
      _handleClearKey() {
        this.money = '?';
      },
      _handleConfirmKey() {
        let S = this.money;
        //未输入
        if (!S.length) {
          // alert('您目前未输入!')
          return false;
        }
        //将 8. 这种转换成 8.00
        if (S.indexOf('.') > -1 && S.indexOf('.') == (S.length - 1))
          S = Number(S.substring(0, S.length - 1)).toFixed(2);
        //保留两位
        S = Number(S).toFixed(2);
        this.$emit('confirmEvent', S)


      },
      //处理数字
      _handleNumberKey(num) {
        let S = this.money;
        //如果有小数点且小数点位数不小于2
        if (S.indexOf('.') > -1 && S.substring(S.indexOf('.') + 1).length < 2)
          this.money = S + num;
        //没有小数点
        if (!(S.indexOf('.') > -1)) {
          //如果第一位是0，只能输入小数点
          if (num == 0 && S.length == 0)
            this.money = '0.';
          else {
            if (S.length && Number(S.charAt(0)) === 0) return;
            this.money = S + num;
          }
        }
      },
	  emitKeyResult(result){
		   this.$emit('syncResult', result)
	  }

    }
  }
</script>

<style lang="scss" scoped>
  .key-container {
    // background-color: #00aaee;
    padding: 10rpx;
    width: 720rpx;
    // height: 1200rpx;

    // position: relative;
    .key-title {
      color: #fff;
      text-align: center;
      padding: 30rpx 0;
    }

    .mian-center {
      background-color: #f5f5f5;
      padding: 20rpx;

      .input-box {
        background-color: #fff;
        text-align: right;
        padding: 20rpx 10rpx 20rpx 0;
        font-size: 60rpx;
        box-shadow: 0 0 4rpx 1rpx rgba(0, 0, 0, .35);
        border: 1rpx solid #cacaca;
      }

      .keyboard {
        background-color: #f5f5f5;

        .key-row {
          display: flex;
          justify-content: space-between;
          margin: 40rpx 0;

          .key-cell {
            border-radius: 20rpx;
            background: #ffffff;
            width: 150rpx;
            height: 150rpx;
            text-align: center;
            line-height: 150rpx;
            font-size: 50rpx;
            box-shadow: 0 0 4rpx 1rpx rgba(0, 0, 0, .35);
            border: 1rpx solid #cacaca;
          }
        }
      }
    }

  }
</style>
